<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热点事件首页</title>
    <script src="./vue3.js"></script>
    <script src="./axios.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f3f3f3;
        }
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        form {
            margin-bottom: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #ffffff;
        }
        thead {
            background-color: hotpink;
            color: white;
        }
        th, td {
            text-align: left;
            padding: 15px;
            border: 1px solid #ddd;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .pagination a {
            margin: 0 5px;
            text-decoration: none;
            color: hotpink;
        }
        .pagination span {
            margin: 0 5px;
        }

        .modal {
            display: block;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;  /* 使用百分比让宽度更自适应 */
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);  /* 添加阴影 */
            border-radius: 10px;  /* 添加圆角 */
        }

        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        /* 改进表单样式 */
        .modal form {
            display: flex;
            flex-direction: column;
        }

        .modal form label {
            margin-bottom: 5px;
        }

        .modal form input[type="text"], form input[type="number"] {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }

        .modal form input[type="submit"] {
            background-color: hotpink;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px;
            cursor: pointer;
        }

        .modal form input[type="submit"]:hover {
            background-color: #0056b3;
        }

        /* 排序链接样式 */
        .sort-arrows {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
        }

        .sort-arrows a {
            color: white;
            text-decoration: none;
            font-size: 0.7em;
            margin: 2px 0;  /* 上下边距为2px，左右边距为0 */
        }

        /* 为排序链接添加鼠标悬停效果 */
        .sort-arrows a:hover {
            color: #0056b3;
        }
        .sort-th{
            display: flex;
        }
        .sort-th-title{
            line-height: 2em;
        }

        .bg-red{
            color: green !important;
        }

        .highlight {
            color: red; /*或者你想要的任何颜色*/
        }

        .user-nav {
            display: flex;
            align-items: center;
            padding: 1em;
            background-color: #f3f3f3;
        }
        .user-nav span, .user-nav a {
            margin-right: 1em;
            color: #007BFF;
            text-decoration: none;
        }
        .user-nav a:last-child {
            margin-right: 0;
        }
        .user-nav .flex-grow {
            flex-grow: 1;
        }
        .user-nav .home-link {
            margin-right: auto;
        }


        /* 被点击时的样式 */
        .paginationok {
            color: #ff0000 !important; /* 设置点击后的链接文字颜色 */
            text-decoration: underline !important; /* 添加下划线 */
        }
    </style>
</head>
<body>
    <div id="app">

        <div class="container">
            <div class="user-nav">
                <a class="home-link" href="index.html">回到首页</a>
                <div class="flex-grow"></div>
                <div v-if="loginUser.id == 0">
                    <a href="login.html">登录</a>
                    <a href="register.html">注册</a>
                </div>
                <div v-if="loginUser.id != 0">
                    <span>欢迎，{{loginUser.nickname}}</span>
                    <a href="javascript:void(0)" @click="logout">退出</a>
                </div>
            </div>
            <div>
                <label>关键字:</label>
                <input type="text"  name="title" v-model="eventQuery.title">
                <input type="button" value="搜索" @click="loadEventList">
            </div>
            <table>
                <thead>
                <tr>
                    <th>关键字</th>
                    <th class="sort-th">
                        <div class="sort-th-title">搜索指数</div>
                        <div class="sort-arrows">
                            <a @click="changeSort('search_index','asc')" :class="{'bg-red':eventQuery.sort=='search_index'&&eventQuery.order=='asc'}" href="javascript:void(0)">▲</a>
                            <a @click="changeSort('search_index','desc')" :class="{'bg-red':eventQuery.sort=='search_index'&&eventQuery.order=='desc'}" href="javascript:void(0)" title="降序排序">▼</a>
                        </div>
                    </th>
                    <th>作者</th>
                    <th class="sort-th">
                        <div class="sort-th-title">创建时间</div>
                        <div class="sort-arrows">
                            <a @click="changeSort('create_time','asc')" :class="{'bg-red':eventQuery.sort=='create_time'&&eventQuery.order=='asc'}" href="javascript:void(0)" title="升序排序">▲</a>
                            <a @click="changeSort('create_time','desc')" :class="{'bg-red':eventQuery.sort=='create_time'&&eventQuery.order=='desc'}" href="javascript:void(0)" title="降序排序">▼</a>
                        </div>
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in pageinfo.list">
                    <td>
                        <a :href="'detail.html?id='+item.id" v-html="highlightTitle(item.title)"></a>
                    </td>
                    <td>{{item.searchIndex}}</td>
                    <td>{{item.user!=null?item.user.nickname:'匿名'}}</td>
                    <td>{{item.createTime}}
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="pagination">
                <a href="javascript:void(0)" @click="changePage(1)">首页</a>
                <a href="javascript:void(0)" @click="changePage(eventQuery.pageNum-1)">&laquo; 上一页</a>
                <a href="javascript:void(0)"
                   :class="{paginationok:pageNum==eventQuery.pageNum}"
                   v-for="pageNum in pageinfo.navigatepageNums"
                   @click="changePage(pageNum)">
                    {{pageNum}}
                </a>
                <a href="javascript:void(0)" @click="changePage(eventQuery.pageNum+1)">下一页 &raquo;</a>
                <a href="javascript:void(0)" @click="changePage(pageinfo.pages)">末页</a>
                <span>第 {{eventQuery.pageNum}} 页，共 {{pageinfo.pages}} 页</span>
            </div>
            <!-- 添加事件按钮 -->
            <button id="addEventButton" @click="addEventModalIsShow=true">添加事件</button>

            <!-- 添加事件模态框 -->
            <div id="addEventModal" v-show="addEventModalIsShow" class="modal" @click="closeModal">
                <div class="modal-content" @click.stop>
                    <span class="close" @click="closeModal">&times;</span>
                    <form >
                        <label >标题:</label>
                        <input type="text" v-model="eventAdd.title" required>
                        <label >内容:</label>
                        <input type="text" v-model="eventAdd.content" required>
                        <label>搜索指数:</label>
                        <input type="number" v-model="eventAdd.searchIndex"  required>
                        <input type="button" @click="addevent" value="提交">
                    </form>
                </div>
            </div>
        </div>

    </div>
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    events:[],
                    pageinfo:{},
                    eventQuery:{
                        pageNum:1,
                        pageSize:3,
                        title:'',
                        sort:'',
                        order:'',
                    },
                    eventAdd:{
                        title:'',
                        content:'',
                        searchIndex:0,
                        userId:0
                    },
                    loginUser:{
                        id:0
                    },
                    pageCount:0,
                    addEventModalIsShow:false,

                }
            },
            methods:{
                loadEventList(){
                    axios.get(`http://127.0.0.1:8088/event/list`,{
                        params:{
                            ...this.eventQuery
                        }
                    }).then(res => {
                        console.log(res.data.data)
                        this.pageinfo = res.data.data
                        // this.events = res.data.data
                        // this.pageCount = res.data.pageCount
                    })
                },
                changePage(page){
                    if(page>=1 && page<=this.pageinfo.pages) {
                        this.eventQuery.pageNum = page
                        this.loadEventList()
                    }
                },
                changeSort(sort,order){
                    this.eventQuery.sort=sort
                    this.eventQuery.order=order
                    this.eventQuery.page=1
                    this.loadEventList()
                },
                highlightTitle(text) {
                    if(this.eventQuery.title == ""){
                        return text;
                    }
                    const regex = new RegExp(this.eventQuery.title, 'g');
                    return text.replace(regex, '<span class="highlight">' + this.eventQuery.title + '</span>');
                },
                closeModal() {
                    this.addEventModalIsShow = false
                    this.eventAdd = {
                        title: '',
                        content: '',
                        searchIndex: 0,
                        // userId: 1
                    };
                },
                addevent(){
                    if(this.loginUser.id == 0){
                        alert('请登录后发帖')
                        return
                    }
                    console.log(this.eventAdd)
                    let token = sessionStorage.getItem('token');
                    axios.post('http://127.0.0.1:8088/event/add',this.eventAdd,{
                        headers: {
                            'token': token?token:''
                        }
                    }).then(res => {
                        if(res.data.success){
                            this.closeModal();
                            alert("id:"+res.data.data.id)
                            this.loadEventList();
                        }
                    }).catch(reason => {
                        console.log(reason.response)
                        if(reason.response.status == 401){
                            alert("401 token失效")
                        }

                    })
                },
                logout(){
                    sessionStorage.removeItem('loginUser');
                    this.loginUser = {
                        id:0
                    }
                }
            },
            created(){
                this.loadEventList()
                //读取sessionStorage
                let loginUserStr = sessionStorage.getItem('loginUser');
                if (loginUserStr != null) {
                    let loginUser = JSON.parse(loginUserStr);
                    console.log(loginUser);
                    this.loginUser = loginUser
                    // this.eventAdd.userId = this.loginUser.id
                }else{
                    this.loginUser = {
                        id:0
                    }
                }

            },
            mounted(){
                this.eventAdd.userId = this.loginUser.id
            }
        }).mount('#app')
    </script>
</body>
</html>